<template>
	<view class="layout">
		<view class="nav">
			<!-- 左侧导航列表 -->
			<scroll-view class="nav-list" scroll-y style="height: 100vh;">
				<view class="nav-item" v-for="(item, index) in navItems" :key="index"
					:class="{ 'selected': index === selectedIndex }" @click="selectNavItem(index)">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view class="content">
			<!-- 右侧内容 -->
			<view class="content-item">
				<productRightContent :CategoryId="selectedNavItem.id"> </productRightContent>

			</view>
		</view>





	</view>
</template>

<script>
	import productRightContent from "@/components/product/content.vue"
	export default {

		components: {
			productRightContent
		},
		data() {
			return {
				navItems: [],
				selectedIndex: 1,
				selectedNavItem: {},
			};
		},
		created() {
			this.getCategory()
		},
		methods: {
			selectNavItem(index) {
				this.selectedIndex = index;
				this.selectedNavItem = this.navItems[index];
				console.log(this.selectedNavItem)
			},
			async getCategory(){
				const result= await this.$http.getCategory()
				if(result.code==1){
					this.navItems=result.data
					if(this.navItems.length>0){
						this.selectedNavItem=this.navItems[1]
					}
				}
			}
			
		}
	};
</script>

<style>
	.layout {
		display: flex;
		height: 100vh;
	}

	.nav {
		flex: 0 0 auto;
		width: 25%;
		background-color: #f0f0f0;
		/* 左侧导航的背景颜色 */
	}

	.nav-item {
		padding: 10px;
		cursor: pointer;
		transition: background-color 0.3s ease;
		color: black;
		font-size: 12px;
	}

	.selected {
		background-color: #ccc;
		/* 选中导航项的背景颜色 */
		color: deepskyblue;
		background-color: white;
		border-left: 5px solid deepskyblue;
	}

	.content {
		/* flex: 1; */
		background-color:whitesmoke;
		/* 右侧内容区的背景颜色 */
		/* padding: 10px; */
		/* border: 1px solid black; */
		padding: 10px;
		width: 95%;
		overflow-y: auto;
	}

	.content-item {
		
		/* margin: 10px; */
		/* padding: 20px; */
		/* border: 1px solid red; */
		
	}
</style>